#{extends 'main.html' /}
#{set title:'Edit deck: ' + deck.name /}

<h1>Edit deck: ${deck.name}</h1>


<script type="text/javascript">
    function deletecard_confirm(url) {
        var name = confirm("Are you sure you want to delete this card?")
        if (name == true) {
            window.location = url
        }
    }
</script>


<div id="items">

    #{if deck.notes}
    <p>
    <pre>${deck.notes}</pre>
    </p>
    #{/if}

    <p>
        <a href="@{Games.create(deck.id)}" class="action">Create Game</a>
    </p>

    <table border="0" width="100%">

        <ul id="todo">
            <tr>
                <td>
                    <strong>Question</strong>
                </td>
                <td>
                    <strong>Answer</strong>
                </td>
                <td>

                </td>
            </tr>
            #{list items:cards, as:'card'}
            <tr>
                <td width="45%">
                    <textarea rows="10" cols="40" name="question">${card.question}</textarea>
                </td>
                <td width="45%">
                    <textarea rows="10" cols="40" name="question">${card.answer}</textarea>
                </td>
                <td width="10%">
                    <a href="@{Decks.editCard(card.id)}" class="action">Edit</a>
                    <br/>
                    <br/>
                    <br/>
                    <a href="#" class="action" onclick="deletecard_confirm('@{Decks.deleteItem(deck.id, card.id)}')">[Delete]</a>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <hr/>
                </td>
            </tr>
            #{/list}
        </ul>


    </table>

    <p>&nbsp;</p>

    <p>&nbsp;</p>


    #{form @Decks.addItem(deck.id)}
    <p>

    <h1>Add new card</h1>
    </p>
    <table>
        <tr>
            <td>
                <strong>Question</strong>
            </td>
            <td>
                <strong>Answer</strong>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td width="45%">
                <textarea rows="10" cols="40" name="question" id="question">${params.question}</textarea>
            </td>
            <td width="45%">
                <textarea rows="10" cols="40" name="answer" id="answer">${params.answer}</textarea>
            </td>
            <td width="10%">
                <input type="submit" value="Add card">
            </td>
        </tr>
    </table>

    #{/form}

</div>


</script>